<template>
	<view class="mine">
		<u-navbar title="美言读写" :autoBack="true" leftIconColor="#ffffff" :placeholder="true">
		</u-navbar>

		<view class="userInfo">
			<view class="changeRole" @click="handleChangeRole">
				<image src="https://mp.blrwworkshop.com/imgs/role.png" mode=""></image>
				<view class="">
					切换角色
				</view>
			</view>

			<view class="InfoContent">
				<view class="avatarbox" :class="{avatarboxBorder_student:role==1}">
					<image v-if="role==1" :src="userInfo.avatar" mode=""></image>
					<image v-if="role==2" :src="parentInfo.avatar" mode=""></image>
				</view>
				<view class="info">
					<view v-if="role==1" class="name">
						{{userInfo.name || ""}}
					</view>
					<view v-if="role==2" class="name">
						{{ parentInfo.parentsName || ""}}
					</view>
					<view class="school">
						{{classInfo.schoolName || ""}}
					</view>
					<view class="classfiy">
						{{classInfo.gradeName || ""}}
						{{classInfo.clazzName || ""}}
					</view>
				</view>
			</view>
		</view>


		<view v-if="role ==1" class="ProgressContent" @click="handleLearningProgress">
			<view class="titleBox">
				<view class="title">
					学习进度
				</view>
				<image src="https://mp.blrwworkshop.com/imgs/rightIcon.png" mode=""></image>
			</view>
			<view class="container">
				<canvas canvas-id="progressCanvas" class="progress-canvas"></canvas>
				<view class="progress-text">{{progress || 0}}%</view>
				<view class="progressDesc">
					<view class="progressDesc_item">
						0%
					</view>
					<view class="progressDesc_tip">
						总课时完成进度
					</view>
					<view class="progressDesc_item">
						100%
					</view>
				</view>
			</view>
		</view>
		<view v-if="role ==2 && progressList1" class="" @click="handleLearningProgress(progressList1.studentId)">
			<view class="ProgressContent">
				<view class="titleBox">
					<view class="title">
						学习进度
					</view>
					<image src="https://mp.blrwworkshop.com/imgs/rightIcon.png" mode=""></image>
				</view>
				<view class="">
					<view class="container">
						<view class="student">
							{{progressList1.name}}
						</view>
						<canvas canvas-id="progressCanvas1" class="progress-canvas"></canvas>
						<view class="progress-text">{{progressList1.progress || 0}}%</view>
						<view class="progressDesc">
							<view class="progressDesc_item">
								0%
							</view>
							<view class="progressDesc_tip">
								总课时完成进度
							</view>
							<view class="progressDesc_item">
								100%
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view v-if="role ==2 && progressList2" class="" @click="handleLearningProgress(progressList2.studentId)">
			<view class="ProgressContent">
				<view class="titleBox">
					<view class="title">
						学习进度
					</view>
					<image src="https://mp.blrwworkshop.com/imgs/rightIcon.png" mode=""></image>
				</view>
				<view class="">
					<view class="container">
						<view class="student">
							{{progressList2.name}}
						</view>
						<canvas canvas-id="progressCanvas2" class="progress-canvas"></canvas>
						<view class="progress-text">{{progressList2.progress || 0}}%</view>
						<view class="progressDesc">
							<view class="progressDesc_item">
								0%
							</view>
							<view class="progressDesc_tip">
								总课时完成进度
							</view>
							<view class="progressDesc_item">
								100%
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="listContent">
			<view v-if="role ==1" class="listItem" @click="handlemyCourses">
				<view class="itemname">
					我的课程
				</view>
				<image src="https://mp.blrwworkshop.com/imgs/rightIcon.png" mode=""></image>
			</view>
			<view class="listItem" @click="handleOtherParent">
				<view class="itemname">
					其他家长信息
				</view>
				<image src="https://mp.blrwworkshop.com/imgs/rightIcon.png" mode=""></image>
			</view>
			<view class="listItem" @click="handleContactService">
				<view class="itemname">
					联系客服
				</view>
				<image src="https://mp.blrwworkshop.com/imgs/rightIcon.png" mode=""></image>
			</view>
			<view v-if="role ==2" class="listItem" @click="handleChangeStudent">
				<view class="itemname">
					当前学生
				</view>
				<image src="https://mp.blrwworkshop.com/imgs/rightIcon.png" mode=""></image>
			</view>
			<view class="listItem" @click="handleSet">
				<view class="itemname">
					设置
				</view>
				<image src="https://mp.blrwworkshop.com/imgs/rightIcon.png" mode=""></image>
			</view>
		</view>
		<view class="" style="height: 200rpx;"></view>

		<custom-tabbar :current="2" />
	</view>
</template>

<script>
	import CustomTabbar from '@/components/custom-tabbar.vue';
	import semiCircleProgress from "@/components/SemiCircleProgress/SemiCircleProgress.vue"
	import {
		getStudentInfo,
		getParentsInfo,
		qryCurrentStuProgress,
		qryAllStuProgress,
	} from "@/api/mine.js"
	import {
		editLoginType
	} from "@/api/api.js"
	export default {
		components: {
			CustomTabbar,
			semiCircleProgress
		},
		data() {
			return {
				role: uni.getStorageSync("role"),
				progress: 0,
				progress1: 0, //学生1
				progress2: 0, //学生2
				classInfo: {},
				userInfo: {},
				parentInfo: {},
				progressList1: null, //学生1
				progressList2: null, //学生2


			}
		},
		watch: {
			// progress(newVal) {
			// 	this.drawProgress(); // 确保 progress 变化时重绘
			// }
		},
		onReady() {},
		onLoad() {

		},
		onShow() {
			if (this.role == 1) {
				this.handleGetStudentInfo()
				this.handleGetqryCurrentStuProgress()
			}
			if (this.role == 2) {
				this.handleGetParentsInfo()
				this.handleGetqryAllStuProgress()
			}
		},
		methods: {
			//获取学生信息
			async handleGetStudentInfo() {
				let res = await getStudentInfo()
				if (res.code == 200) {
					this.classInfo = res.clazz
					this.userInfo = res.student
				}
			},
			//查询当前写生进度(学生角色)
			async handleGetqryCurrentStuProgress() {
				let res = await qryCurrentStuProgress()
				this.progress = res.data
				this.drawProgress()
			},
			//获取家长信息
			async handleGetParentsInfo() {
				let res = await getParentsInfo()
				this.parentInfo = res
				this.classInfo = res.clazz

			},
			async handleGetqryAllStuProgress() {
				let res = await qryAllStuProgress()
				if (res.data[0]) {
					this.progressList1 = res.data[0]
					this.progress1 = Number(res.data[0].progress)
					this.drawProgress1()
				}
				if (res.data[1]) {
					this.progressList2 = res.data[1]
					this.progress2 = Number(res.data[1].progress)
					this.drawProgress2()
				}
			},
			//切换角色
			async handleChangeRole() {
				uni.showLoading({
					title: "正在切换",
					mask: true
				});

				let res = await editLoginType({
					userType: this.role == 1 ? 2 : 1
				})
				if (res.code == 200) {
					setTimeout(() => {
						this.role = this.role == 1 ? 2 : 1
						uni.setStorageSync('role', this.role)
						uni.$emit('changeTabsRole', "切换角色也要切换图片")
						setTimeout(() => {
							this.role == 1 ? this.handleGetStudentInfo() : this.handleGetParentsInfo()
							this.role == 1 ? this.handleGetqryCurrentStuProgress() : this
								.handleGetqryAllStuProgress()
							uni.hideLoading()
							uni.showToast({
								title: '切换成功',
								icon: 'none'
							});
						}, 1500)
					}, 1500)

				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			},
			handleLearningProgress(studentId) {
				if (this.role == 1) {
					uni.navigateTo({
						url: "/pages/minePackage/learningProgress/learningProgress"
					})
				} else {
					uni.navigateTo({
						url: `/pages/minePackage/learningProgress/learningProgress?studentId=${studentId}`
					})
				}

			},
			handlemyCourses() {
				uni.navigateTo({
					url: "/pages/minePackage/myCourses/myCourses"
				})
			},
			handleOtherParent() {
				uni.navigateTo({
					url: "/pages/minePackage/ortherParent/ortherParent"
				})
			},
			handleContactService() {
				uni.navigateTo({
					url: "/pages/minePackage/contactService/contactService"
				})
			},
			handleSet() {
				uni.navigateTo({
					url: "/pages/minePackage/setPage/setPage"
				})
			},
			handleChangeStudent() {
				uni.navigateTo({
					url: "/pages/minePackage/otherStudents/otherStudents"
				})
			},
			// ===========================
			drawProgress() {
				const ctx = uni.createCanvasContext('progressCanvas', this)
				const width = 200
				const height = 100
				const lineWidth = 10
				const radius = width / 2 - lineWidth

				ctx.clearRect(0, 0, width, height)

				// 绘制背景半圆
				ctx.beginPath()
				ctx.arc(width / 2, height, radius, Math.PI, 0, false)
				ctx.setStrokeStyle('#eeeeee')
				ctx.setLineWidth(lineWidth)
				ctx.stroke()

				// 绘制进度半圆
				if (this.progress > 0) {
					ctx.beginPath()
					const startAngle = Math.PI
					const endAngle = Math.PI + (this.progress / 100) * Math.PI
					ctx.arc(width / 2, height, radius, startAngle, endAngle, false)
					ctx.setStrokeStyle('#FFA316')
					ctx.setLineWidth(lineWidth)
					ctx.setLineCap('round')
					ctx.stroke()
				}

				ctx.draw()
			},
			drawProgress1() {
				const ctx = uni.createCanvasContext('progressCanvas1', this)
				const width = 200
				const height = 100
				const lineWidth = 10
				const radius = width / 2 - lineWidth

				ctx.clearRect(0, 0, width, height)

				// 绘制背景半圆
				ctx.beginPath()
				ctx.arc(width / 2, height, radius, Math.PI, 0, false)
				ctx.setStrokeStyle('#eeeeee')
				ctx.setLineWidth(lineWidth)
				ctx.stroke()

				// 绘制进度半圆
				if (this.progress1 > 0) {
					ctx.beginPath()
					const startAngle = Math.PI
					const endAngle = Math.PI + (this.progress1 / 100) * Math.PI
					ctx.arc(width / 2, height, radius, startAngle, endAngle, false)
					ctx.setStrokeStyle('#41C76F')
					ctx.setLineWidth(lineWidth)
					ctx.setLineCap('round')
					ctx.stroke()
				}

				ctx.draw()
			},
			drawProgress2() {
				const ctx = uni.createCanvasContext('progressCanvas2', this)
				const width = 200
				const height = 100
				const lineWidth = 10
				const radius = width / 2 - lineWidth

				ctx.clearRect(0, 0, width, height)

				// 绘制背景半圆
				ctx.beginPath()
				ctx.arc(width / 2, height, radius, Math.PI, 0, false)
				ctx.setStrokeStyle('#eeeeee')
				ctx.setLineWidth(lineWidth)
				ctx.stroke()

				// 绘制进度半圆
				if (this.progress2 > 0) {
					ctx.beginPath()
					const startAngle = Math.PI
					const endAngle = Math.PI + (this.progress2 / 100) * Math.PI
					ctx.arc(width / 2, height, radius, startAngle, endAngle, false)
					ctx.setStrokeStyle('#41C76F')
					ctx.setLineWidth(lineWidth)
					ctx.setLineCap('round')
					ctx.stroke()
				}

				ctx.draw()
			},

		}
	}
</script>

<style scoped lang="scss">
	.mine {
		width: 100%;
		min-height: 100vh;
		background-color: #F9F9F9;

		.userInfo {
			width: 100%;
			height: 260rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(255, 161, 22, 0.16);
			border-radius: 0rpx 0rpx 20rpx 20rpx;
			margin-top: 2rpx;
			padding: 20rpx;
			box-sizing: border-box;

			.changeRole {
				width: 175rpx;
				display: flex;
				align-items: center;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				margin-left: 76%;

				image {
					width: 48rpx;
					height: 48rpx;
				}
			}

			.InfoContent {
				width: 100%;
				display: flex;
				align-items: center;

				.avatarbox {
					width: 160rpx;
					height: 160rpx;
					border-radius: 160rpx;

					image {
						width: 160rpx;
						height: 160rpx;
						border-radius: 160rpx;
					}
				}

				.avatarboxBorder_student {
					border: 6rpx solid #FFA116;
				}

				.info {
					margin-left: 16rpx;

					.name {
						font-weight: 550;
						font-size: 40rpx;
						color: #333333;
						line-height: 60rpx;
					}

					.school {
						font-weight: 400;
						font-size: 28rpx;
						color: #333333;
						margin-top: 32rpx;
					}

					.classfiy {
						font-weight: 400;
						font-size: 28rpx;
						color: #333333;
						margin-top: 8rpx;
					}
				}
			}

		}


		.ProgressContent {
			width: 690rpx;
			height: 394rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin: 16rpx auto 0;
			padding: 20rpx;
			box-sizing: border-box;

			.titleBox {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.title {
					font-weight: 600;
					font-size: 32rpx;
					color: #333333;
				}

				image {
					width: 48rpx;
					height: 48rpx;
				}
			}
		}


		.listContent {
			width: 690rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin: 20rpx auto;

			.listItem {
				width: 100%;
				height: 88rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 24rpx 32rpx;
				box-sizing: border-box;

				.itemname {
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
				}

				image {
					width: 48rpx;
					height: 48rpx;
				}
			}
		}

	}

	.container {
		position: relative;
		width: 200px;
		// height: 100px;
		margin: 20px auto;
	}

	.student {
		width: 100%;
		text-align: center;
		font-size: 30rpx;
	}

	.progress-canvas {
		width: 200px;
		height: 100px;
	}

	.progress-text {
		position: absolute;
		bottom: 10px;
		left: 0;
		right: 0;
		text-align: center;
		font-weight: 550;
		font-size: 64rpx;
		color: #333333;
		line-height: 90rpx;
	}

	.progressDesc {
		width: 200px;
		font-weight: 400;
		font-size: 24rpx;
		color: #333333;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 10rpx;

		.progressDesc_item {
			width: 70rpx;
		}

	}
</style>